<template>
  <div class="apply publicBox">

    <div class="publicBoxTitle ">
      订单详情
    </div>
    <div class="allOrderBox publicBoxContent">
      <div class="nav">
        <div class="line_left line"></div>
        <div class="cneter">
          <el-steps :active="act" align-center>
            <el-step title="申请售后"></el-step>
            <el-step title="审核"></el-step>
            <el-step title="退货"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </div>
        <div :class="['line',changRight==1 ? 'chang_line' : 'line_right']"></div>
      </div>
      <div class="main">
        <div class="mainLeft">
          <div class="leftOne">
            <p>
              <span class="oneTitle">商家已同意退货，请尽快退还货物</span>
              <span class="twoTitle">剩余时间：<uni-countdown color="#E93030" :showColon="false" :day="d" :hour="h" :minute="m" :second="s"></uni-countdown></span>
            </p>
            <p>
              <span class="threeTitle">未与商家协商一致，请勿使用到付或平邮，已免商家拒签</span>
            </p>
          </div>
          <div class="leftTwo">
            <p class="oneTitle">退货地址</p>
            <div class="twoMain">
              <p>
                <span>{{address && address.receipt_name}}</span><span style="margin-left: 20px">{{address && address.receipt_phone}}</span>
              </p>
              <p>
                {{address && address.receipt_address}}
              </p>
            </div>
          </div>
          <div class="leftThree">
            <p>
              <span class="oneTitle">我已寄出</span><span class="threeMain">填写物流单号</span>
            </p>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="from">

              <el-form-item label="物流单号" prop="express_no">
                <el-input v-model="form.express_no" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="物流公司" prop="express_id">
                <el-input v-model="form.express_id" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="物流运费" prop="express_price">
                <el-input v-model="form.express_price" style="width: 200px" type="number"></el-input>
              </el-form-item>
            </el-form>
            <el-button type="primary" round @click="submitForm('form')" style="margin-left: 30px">提交申请</el-button>
          </div>
        </div>
        <div class="mainRight">
          <div class="mainbox">
            <div class="yd ydLeft"></div>
            <div class="yd ydRight"></div>
            <div class="pub">
              <span>订单编号：{{orderDetails && orderDetails.order_no}} </span>
            </div>
            <div class="pub">
              <span >下单时间：{{orderDetails && orderDetails.order_goods.create_at}}</span>
            </div>
            <div class="pub">
              <span>实付金额：￥{{orderDetails && orderDetails.order_goods.total_pay_price}} <span class="hyf">(含运费：<span class="hdq">￥{{orderDetails && orderDetails.order_goods.express_price}}</span>)</span></span>
            </div>
            <div class="boxList pub">
              <div class="boxLeft">
                <img :src="orderDetails && $getImg(orderDetails.order_goods && orderDetails.order_goods.image)" />
              </div>
              <div class="boxRight">
                <div>{{orderDetails && orderDetails.order_goods.goods_name}}</div>
                <div class="sum" v-for="(ite,inde) in orderDetails && orderDetails.order_goods.attr">{{ite[0]}}：{{ite[1]}}<span
                    v-show="ite[0]=='数量'">（{{orderDetails.order_goods.unit}}）</span></div>
              </div>
            </div>
            <div class="info">
              <p>退款信息</p>
              <p>退款原因：{{orderDetails && orderDetails.apply_desc}}</p>
              <p>退款金额：<span class="hdq">￥{{orderDetails && orderDetails.apply_refund_money}}</span></p>
              <p>申请时间：{{orderDetails && orderDetails.create_at}}</p>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import uniCountdown from '../common/uni-countdown'
    export default {
        name: "applyDetails",
        components: {
            uniCountdown
        },
        data() {
            return {
                act: 3,
                changRight: '',
                reverse: true,
                show: false,
                form: {

                    express_price:'',
                    express_id:'',
                    express_no:'',

                },
                rules: {
                    express_price: [
                        {required: true, message: '请输入运费', trigger: 'blur'},
                    ],
                    express_id: [
                        {required: true, message: '请输入物流公司', trigger: 'blur'}
                    ],
                    express_no: [
                        {required: true, message: '请输入物流单号', trigger: 'blur'}
                    ],



                },
                dialogImageUrl: '',
                dialogVisible: false,
                orderDetails:null,
                orderId:'',
                address:null,
                d:0,
                h:0,
                m:0,
                s:0


            };
        },
        created(){
            this.orderId = this.$route.query.orderId;

            this.getList();
        },
        methods: {
            initTime() {
                //兼容苹果new date
                var getDatas = (strdate)=> {
                    var arr = strdate.split(/[- : \/]/);
                    var date = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);
                    return date;
                }
                const endTime = Date.parse(getDatas(this.orderDetails.create_at)) + 3 * 24 * 3600 * 1000;
                const nowTime = Date.parse(new Date());

                let leftTime = parseInt((endTime - nowTime) / 1000)
                this.d = parseInt(leftTime / (24 * 60 * 60))
                this.h = parseInt(leftTime / (60 * 60) % 24)
                this.m = parseInt(leftTime / 60 % 60)
                this.s = parseInt(leftTime % 60)


            },
            getList() {
                this.$HttpGet("/index.php?s=/admin/home.refund/detail", {
                    order_refund_id: this.orderId
                }).then(res => {

                    this.orderDetails = res.data;
                    this.address=JSON.parse(this.orderDetails.addressee);
                    console.log(this.address)
                    // //拆分规格
                    var arr = this.orderDetails.order_goods.goods_attr.split("|");
                    var endArr = arr.map((item,index)=>{
                        return item.split("_")
                    });
                    endArr.pop();
                    this.num += endArr.length;
                    this.orderDetails.order_goods.attr=endArr;
                    console.log(this.orderDetails)
                    this.initTime();



                })
            },



            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                          this.$HttpPost("/index.php?s=/admin/home.refund/delivery", {
                           ...this.form,
                              order_refund_id:this.orderDetails.order_refund_id
                        }).then(res => {
                              if(res.code==0){
                                  this.$notifySuccess('提交成功')
                                  window.history.back();
                              }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    }
</script>

<style lang="scss" scoped>
  .allOrderBox {

    .nav {
      position: relative;
      width: 1020px;
      height: 100%;
      margin: 0 auto;
      padding-top: 16px;
      display: flex;

      .cneter {
        position: relative;
        width: 80%;
        left: 10%;
      }

      .line {
        width: 20%;
        height: 1px;
        margin-top: 11px;
      }

      .line_left {
        position: absolute;
        border-top: 2px solid rgba($color: #409eff, $alpha: 1);

      }

      .line_right {
        position: absolute;
        right: 0;
        border-top: 2px solid rgba($color: #c0c4cc, $alpha: 1);
      }
    }

    .main {
      border-top: 1px solid #EEEEEE;
      display: flex;
      margin-top: 20px;

      .mainLeft, .mainRight {
        width: 40%;
        padding-top: 20px;
      }

      .mainLeft {
        margin-left: 5%;
        .oneTitle{
          color: #000000;
          font-size: 14px;
          font-weight: bold;
        }
        .leftOne{
          height: 100px;
          border-bottom: 1px dashed #E5E5E5;
          p{

            font-family: PingFang SC;


            .twoTitle{
              color: #E93030;
              font-size: 14px;
              font-weight: bold;
              margin-left: 20px;
            }
            .threeTitle{
              font-size: 12px;
              font-weight: 500;
              color: #000000;
            }
          }
        }
        .leftTwo{
          margin-top: 20px;
          p{
            margin-bottom: 20px;
          }
          .twoMain{
            padding-left: 30px;
          }
        }
        .leftThree{
          p{
            margin-bottom: 20px;
          }
          .threeMain{
            margin-left: 20px;
          }
        }
      }

      .mainRight {
        margin-left: 10%;

        .mainbox {
          position: relative;
          /*width: 484px;*/
          /*height: 326px;*/
          background: #FFFFFF;
          border: 1px solid #EEEEEE;
          border-radius: 5px;
          padding-left: 20px;
          padding-bottom: 20px;
          .yd{
            width: 12px;
            height: 12px;
            background: #3A61CA;
            box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.24);
            border-radius: 50%;
            position: absolute;
            top: -7px;
          }
          .ydLeft{
            left: 66px;
          }
          .ydRight{
            right: 66px;
          }
          .pub {
            margin-top: 20px;
            width: 94%;
            .xdsj, .hyf {
              margin-left: 20px;
            }

            .hyf {

            }
          }
          .hdq {
            color: #E93030;
          }
          .boxList {
            height: 60px;
            display: flex;
            padding-bottom: 20px;
            border-bottom: 1px dashed #E5E5E5;
            .boxLeft {
              width: 60px;
              height: 60px;
              background-color: black;

              img{
                width: 60px;

              }
            }

            .boxRight {
              padding-left: 15px;
            }
          }
          .info{
            p{
              margin-top: 20px;
            }
          }

        }
      }
    }

  }

  .money {
    margin-left: 10px;

    .maxMoney {
      margin-left: 20px;

    }

    .moneyStyle {
      margin-left: 10px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #DB3330;
    }
  }

  .tkts {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #E93030;
    margin-left: 5px;
  }
</style>